<template>
  <el-drawer
    :title="drawerTitle[drawerType]"
    size="60%"
    :visible.sync="drawerVisible"
    direction="rtl"
    :close-on-press-escape="false"
    :wrapperClosable="false"
    :destroy-on-close="true"
    :before-close="clearDialog"
    custom-class="tag-drawer"
    v-drawerResize
  >
    <div class="drawer-wrap">
      <div class="drawer-content tag-scrollbar">
        <el-form :model="editForm" label-width="120px" :rules="editFormRules" ref="editForm">
          <h4 class="type-title">
            <div class="icon-box"><icon-svg name="iconBase"></icon-svg></div>
            <span>基本信息</span>
          </h4>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="标题" prop="bulletinTitle">
                <el-input placeholder="请输入标题" v-model="editForm.bulletinTitle"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="内容" prop="bulletinContent">
                <el-input
                  type="textarea"
                  placeholder="请输入内容"
                  v-model="editForm.bulletinContent"
                  :rows="3"
                  resize="none"
                  maxlength="1000"
                  show-word-limit
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="状态" prop="bulletinStatus">
                <el-switch
                  active-color="#13ce66"
                  v-model="editForm.bulletinStatus"
                  :active-value="1"
                  :inactive-value="0"
                >
                </el-switch>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="备注信息" prop="bulletinRemark">
                <el-input
                  type="textarea"
                  placeholder="请输入备注信息，最大不能超过100个字符"
                  v-model="editForm.bulletinRemark"
                  :rows="3"
                  resize="none"
                  maxlength="100"
                  show-word-limit
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="生效时间" prop="sysBulletinTime">
                <el-button type="primary" plain size="mini" @click="setTime">设置有效期</el-button>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="适用用户" prop="tmplId">
                <tag-rules-multiple
                  :ruleId="editForm.tmplId"
                  :ruleName="editForm.tmplName"
                  @confirm="ruleSave"
                ></tag-rules-multiple>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="drawer-btns">
      <el-button @click="clearDialog">取消</el-button>
      <el-button type="primary" @click="submit">确定</el-button>
    </div>
    <time-dialog ref="timeDialog" @save="timeSave"></time-dialog>
  </el-drawer>
</template>

<script>
import timeDialog from '@/components/tag-time-dialog'
export default {
  components: {
    timeDialog
  },
  data() {
    return {
      drawerVisible: false,
      drawerType: 'add',
      drawerTitle: {
        add: '新增',
        edit: '编辑'
      },
      editForm: {
        bulletinId: '',
        bulletinTitle: '',
        bulletinContent: '',
        bulletinStatus: 1,
        bulletinRemark: '',
        sysBulletinTime: [],
        tmplId: [],
        tmplName: []
      },
      editFormRules: {
        bulletinTitle: [
          { required: true, message: '标题不能为空', trigger: 'blur' },
          { max: 50, message: '标题不能超过50个字符', trigger: 'blur' }
        ],
        bulletinContent: [{ required: true, message: '内容不能为空', trigger: 'blur' }],
        bulletinRemark: [{ max: 100, message: '备注信息不能超过100个字符', trigger: 'blur' }],
        sysBulletinTime: [{ required: true, message: '请选择有效期', trigger: 'change' }],
        tmplId: [{ required: true, message: '请设置用户规则', trigger: 'change' }]
      }
    }
  },
  methods: {
    showDrawer(params) {
      this.drawerType = params.type
      if (params.bulletinId) {
        this.editForm.bulletinId = params.bulletinId
        this.getBulletinDetail()
      }
      this.drawerVisible = true
    },
    setTime() {
      this.$refs.timeDialog.showDialog(this.editForm.sysBulletinTime || [])
    },
    timeSave(list) {
      this.editForm.sysBulletinTime = list
    },
    ruleSave(data) {
      this.editForm.tmplId = data.id
      this.editForm.tmplName = data.name
    },
    submit() {
      this.$refs['editForm'].validate(valid => {
        if (valid) {
          let params = {
            bulletinTitle: this.editForm.bulletinTitle,
            bulletinContent: this.editForm.bulletinContent,
            bulletinStatus: this.editForm.bulletinStatus,
            bulletinRemark: this.editForm.bulletinRemark,
            sysBulletinTime: this.editForm.sysBulletinTime,
            tempId: this.editForm.tmplId
          }
          if (this.drawerType === 'edit') params = Object.assign({}, params, { bulletinId: this.editForm.bulletinId })
          this.$ajax({
            url: this.$ajax.setUrl('sys/sysBulletinInfo'),
            method: this.drawerType === 'add' ? 'post' : 'put',
            data: this.$ajax.setData(params)
          }).then(({ data }) => {
            if (data && data.code === '0') {
              this.clearDialog()
              this.$emit('refresh')
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 2000
              })
            } else {
              this.$message.error(data.data || data.msg)
            }
          })
        }
      })
    },
    getBulletinDetail() {
      this.$ajax({
        url: this.$ajax.setUrl('sys/sysBulletinInfo/' + this.editForm.bulletinId),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.editForm.bulletinTitle = data.data.bulletinTitle
          this.editForm.bulletinContent = data.data.bulletinContent
          this.editForm.bulletinStatus = data.data.bulletinStatus
          this.editForm.bulletinRemark = data.data.bulletinRemark
          this.editForm.sysBulletinTime = data.data.sysBulletinTimes
          for (var i = 0; i < data.data.sysUserRuleTmpl.length; i++) {
            this.editForm.tmplId.push(data.data.sysUserRuleTmpl[i].tmplId)
            this.editForm.tmplName.push(data.data.sysUserRuleTmpl[i].ruleNm)
          }
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    clearDialog() {
      this.editForm.bulletinId = ''
      this.editForm.bulletinTitle = ''
      this.editForm.bulletinContent = ''
      this.editForm.bulletinStatus = 1
      this.editForm.bulletinRemark = ''
      this.editForm.sysBulletinTime = []
      this.editForm.tmplId = []
      this.editForm.tmplName = []
      this.$nextTick(() => {
        this.$refs['editForm'].clearValidate()
      })
      this.drawerVisible = false
    }
  }
}
</script>

<style lang="scss"></style>
